<template>
  <el-form ref="form" :model="form" :label-width="labelWidth" :label-position="labelPosition" :rules="rules">
    <el-form-item v-for="item in formData" :key="item.name" :label="item.label" v-if="isShowQc(item)" :prop="item.name">
      <template v-if="item.type === 'input'">
        <el-input v-model.trim="form[item.name]"></el-input>
      </template>
      <template v-else-if="item.type === 'textarea'">
        <el-input v-model="form[item.name]" type="textarea"></el-input>
      </template>
      <template v-else-if="item.type === 'select'">
        <el-select
          v-model="form[item.name]"
          style="width: 100%"
          size="mini"
          @change="selectChange(item.name)"
          collapse-tags
          :filterable="true"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(one, index) in item.data"
            :key="index"
            v-show="one.status !== 'disable'"
            :style="one.status !== 'disable' ? '' : 'height:0;width0'"
            :label="one.label"
            :value="one.value"
          >
          </el-option>
        </el-select>
        <div v-if="type === 'edit' && item.name === 'type' && isShowTip" class="risk-tip">
          {{ $t('configLazyLoad.businessConfig.warningTip') }}<br />
          {{ $t('configLazyLoad.businessConfig.warningTip1') }}
          <div class="p-box">
            <p class="p-tit">互换字段类型：</p>
            <p>单行文本&nbsp⇄&nbsp多行文本&nbsp⇄&nbsp数字</p>
            <p>下拉选择&nbsp⇄&nbsp下拉树形</p>
            <p class="p-tit">单项变换字段类型：</p>
            <p>单选&nbsp→&nbsp下拉</p>
          </div>
          <span style="line-height: 2">{{ $t('configLazyLoad.businessConfig.fieldChange') }}</span>
          <br />
          <span style="line-height: 2">{{ $t('configLazyLoad.businessConfig.modifyFieldType') }}</span>
        </div>
      </template>
      <template v-else-if="item.type === 'switch'">
        <el-switch
          v-model="form[item.name]"
          active-color="#459AE9"
          inactive-color="#DCDFE6"
          @change="selectChange(item.name)"
          :active-value="(item.data && item.data[0]) || true"
          :inactive-value="(item.data && item.data[1]) || false"
        >
        </el-switch>
      </template>
      <template v-else-if="item.type === 'time'">
        <el-time-picker
          size="mini"
          v-model.trim="form[item.name]"
          :editable="false"
          :id="'busTime' + num"
          :placeholder="$t('business.chooseTime')"
          value-format="HH:mm:ss"
        >
        </el-time-picker>
      </template>
      <template v-else-if="item.type === 'date'">
        <el-date-picker
          size="mini"
          v-model.trim="form[item.name]"
          :type="item.subType"
          :id="'busDate' + num"
          :editable="false"
          value-format="yyyy-MM-dd HH:mm:ss"
          :placeholder="$t('business.chooseDate')"
        >
        </el-date-picker>
        <slot :name="item.name"></slot>
      </template>
      <template v-else-if="item.type === 'time'">
        <el-time-picker
          size="mini"
          v-model.trim="form[item.name]"
          :editable="false"
          :id="'busTime' + num"
          :placeholder="$t('business.chooseTime')"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-time-picker>
      </template>
      <template v-else-if="item.type === 'slot'">
        <slot :name="item.name + 'Slot'"></slot>
      </template>
      <template v-else-if="item.type === 'radioGroup'">
        <el-radio-group v-model="form[item.name]" size="mini">
          <el-radio v-for="obj in item.data" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
        </el-radio-group>
      </template>
      <div v-else-if="item.type === 'radioSelect'">
        <el-radio-group v-model="form['actionAllow']" size="mini" @change="typeChange">
          <el-radio v-for="obj in item.data1" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
        </el-radio-group>
        <el-select
          v-if="form['actionAllow'] === 0"
          v-model="form[item.name]"
          style="width: 100%"
          size="mini"
          @change="selectChange(item.name)"
          collapse-tags
          :filterable="true"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(one, index) in item.data"
            :key="index"
            v-show="one.status !== 'disable'"
            :style="one.status !== 'disable' ? '' : 'height:0;width0'"
            :label="one.label"
            :value="one.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-else
          v-model="form['actionQueue']"
          style="width: 100%"
          size="mini"
          @change="selectChange('actionQueue')"
          collapse-tags
          :filterable="true"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(one, index) in item.data"
            :key="index"
            v-show="one.status !== 'disable'"
            :style="one.status !== 'disable' ? '' : 'height:0;width0'"
            :label="one.label"
            :value="one.value"
          >
          </el-option>
        </el-select>
      </div>
      <div v-else-if="item.type === 'doubleSelect'" class="doubleSelect">
        <el-select
          v-model="form[item.name]"
          style="width: 100%"
          size="mini"
          @change="selectChange(item.name)"
          collapse-tags
          :filterable="true"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(one, index) in item.data"
            :key="index"
            v-show="one.status !== 'disable'"
            :style="one.status !== 'disable' ? '' : 'height:0;width0'"
            :label="one.label"
            :value="one.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="defalut"
          v-if="form[item.name] === 0"
          v-model="form['defaultAgent']"
          style="width: 100%"
          size="mini"
          @change="selectChange(item.name)"
          collapse-tags
          :filterable="true"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(one, index) in item.data1"
            :key="index"
            v-show="one.status !== 'disable'"
            :style="one.status !== 'disable' ? '' : 'height:0;width0'"
            :label="one.label"
            :value="one.value"
          >
          </el-option>
        </el-select>
        <el-checkbox
          class="ml-style"
          v-if="item.referOrderInitStatus && (form[item.name] === 1 || form[item.name] === 2)"
          v-model="form[item.referOrderInitStatus]"
          >{{ $t('business.allocationSeats') }}</el-checkbox
        >
      </div>
      <div v-else-if="item.type === 'timeOut'" class="time-out">
        <el-input v-model.trim="form[item.name]"></el-input>
        <el-radio-group v-model="form[item.time]" class="radio" size="mini">
          <el-radio-button label="min">{{ $t('public.minutes2') }}</el-radio-button>
          <el-radio-button label="hours">{{ $t('public.hours2') }}</el-radio-button>
          <el-radio-button label="day">{{ $t('public.day2') }}</el-radio-button>
        </el-radio-group>
      </div>
      <slot :name="item.name"></slot>
    </el-form-item>
    <el-form-item label="">
      <slot name="button"></slot>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'common-form',
  props: {
    type: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    },
    formData: {
      type: Array,
      default: function () {
        return []
      }
    },
    rules: {
      type: Object,
      default: function () {
        return []
      }
    },
    labelWidth: {
      type: String,
      default: '80px'
    },
    labelPosition: {
      type: String,
      default: 'right'
    }
  },
  data() {
    return {
      num: Math.random(),
      isShowTip: false
    }
  },
  methods: {
    typeChange(val) {
      this.$emit('typeChange', val)
    },
    isShowQc(item) {
      if (item.type === 'radioGroup') {
        return this.showAccount
      } else {
        return true
      }
    },
    submit() {
      let success = false
      this.$refs.form.validate((valid) => {
        success = valid
      })
      return { success, data: this.form, isChange: this.isShowTip }
    },
    selectChange(name) {
      if (name === 'type') {
        this.isShowTip = true
      }
      let value = this.form[name]
      this.clearValidate()
      this.$emit('selectChange', { name, value })
    },
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    reset() {
      this.$refs.form.resetFields()
    }
  },
  computed: {
    // 7moor账户 测试dxtest21账户 测试环境 futest账户展示
    showAccount() {
      let accountArr = ['N00000003731', 'N00000002412', 'N00000000011']
      let account = this.$store.state.session.user.account
      return accountArr.includes(account)
    }
  },
  watch: {
    form() {
      this.isShowTip = false
    }
  }
}
</script>

<style scoped lang="stylus">
.risk-tip
  color #F15A57
  font-size 12px
  line-height 14px
  margin-top 10px
  .p-tit
    font-weight bold
  .p-box
    color #E2AA5F
    background #FDF6ED
    padding 15px
    box-sizing border-box
    line-height 18px
.time-out
  position relative
.radio
  position absolute
  width 160px
  top 7px
  margin-left 10px
.doubleSelect
  position relative
.defalut
  position absolute
  margin-left 10px
.ml-style
  position: absolute;
  margin-left: 10px;
</style>
